<template>
	<view>
		<u-gap height="10"></u-gap>
		<view v-if="list.length" class="flex flex-ai-end flex-js-sa">
			<view v-if="list.length > 1" class="flex flex-dir-col flex-ai-center mb-16">
				<view class="number_two_box">
					<image :src="$ossUrl + list[1].avatar"></image>
				</view>
				<image class="number_img" src="@/static/img/numberTwo.png"></image>
				<view class="font-color-black mt-12 font-size-16">{{list[1].nickname}}</view>
				<view class="font-color-666 font-size-12 mt-7">{{typeObject[type].name}}</view>
				<view class="font-color-black font-size-14 mt-7">{{typeObject[type].symbol}}{{list[1][typeObject[type].show]}}</view>
			</view>
			<view class="flex flex-dir-col flex-ai-center" style="position: relative;">
				<image src="@/static/img/numberOneG.png" class="numberOneG"></image>
				<view class="number_one_box">
					<image :src="$ossUrl + list[0].avatar"></image>
				</view>
				<image class="number_img" src="@/static/img/numberOne.png"></image>
				<view class="font-color-black mt-12 font-size-16">{{list[0].nickname}}</view>
				<view class="font-color-666 font-size-12 mt-7">{{typeObject[type].name}}</view>
				<view class="font-color-black font-size-14 mt-7">{{typeObject[type].symbol}}{{list[0][typeObject[type].show]}}</view>
			</view>
			<view v-if="list.length > 2" class="flex flex-dir-col flex-ai-center mb-16">
				<view class="number_three_box">
					<image :src="$ossUrl + list[2].avatar"></image>
				</view>
				<image class="number_img" src="@/static/img/numberThree.png"></image>
				<view class="font-color-black mt-12 font-size-16">{{list[2].nickname}}</view>
				<view class="font-color-666 font-size-12 mt-7">{{typeObject[type].name}}</view>
				<view class="font-color-black font-size-14 mt-7">{{typeObject[type].symbol}}{{list[2][typeObject[type].show]}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			list:{
				type:Array,
				default:() => {
					return []
				}
			},
			type:{
				type:Number,
				default:3
			}
		},
		data(){
			return {
				typeObject:{
					3:{
						name:'购买榜',
						symbol:'￥',
						show:'buy_collection_total_price'
					},
					1:{
						name:'邀请榜',
						symbol:'',
						show:'yao_count'
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.number_two_box {
		width: 120rpx;
		height: 120rpx;
		border-radius: 120rpx;
		border: 8rpx solid #F4F4F4;
		
		image {
			width: 112rpx;
			height: 112rpx;
			border-radius: 112rpx;
		}
	}
	.number_one_box {
		width: 190rpx;
		height: 190rpx;
		border-radius: 190rpx;
		border: 8rpx solid #EDA646;
		margin-top: 100rpx;
		image {
			width: 182rpx;
			height: 182rpx;
			border-radius: 182rpx;
		}
	}
	.number_three_box {
		width: 120rpx;
		height: 120rpx;
		border-radius: 120rpx;
		border: 8rpx solid #FFD028;
		
		image {
			width: 112rpx;
			height: 112rpx;
			border-radius: 112rpx;
		}
	}
	.number_img {
		width: 44rpx;
		height: 44rpx;
		margin-top: -30rpx;
	}
	.numberOneG {
		width: 147.87rpx;
		height: 147.87rpx;
		position: absolute;
		top: 0;
	}
</style>